<template>
  <div class="loading">
    <div>
      <div class="hearder">
        <div style="width: 300px;" class="search">
          <el-input placeholder="请输入内容" v-model="searchdata">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      <div class="hearderAdd">
        <button @click="add">新增</button>
      </div>
      </div>

     <div style="margin-top: 30px">
       <el-table
           :data="dataList"
           style="width: 100%;"
           stripe
       >
         <el-table-column
             prop="id"
             header-align="center"
             align="center"
             label="id">
         </el-table-column>
         <el-table-column
             prop="title"
             header-align="center"
             align="center"
             label="标题"
             :show-overflow-tooltip='showText'>
         </el-table-column>
         <el-table-column
             prop="type"
             header-align="center"
             align="center"
             label="类型">
         </el-table-column>
         <el-table-column
             prop="brand"
             header-align="center"
             align="center"
             label="品牌">
         </el-table-column>
         <el-table-column
             prop="sizeList"
             header-align="center"
             align="center"
             label="尺寸"
             :show-overflow-tooltip='showText'>
         </el-table-column>
         <el-table-column
             prop="colorList"
             header-align="center"
             align="center"
             label="颜色"
             :show-overflow-tooltip='showText'>
         </el-table-column>
         <el-table-column
             prop="price"
             header-align="center"
             align="center"
             label="价格">
         </el-table-column>
         <el-table-column
             prop="wareTotal"
             header-align="center"
             align="center"
             label="库存总量">
         </el-table-column>
         <el-table-column
             prop="status"
             header-align="center"
             align="center"
             label="状态">
           　<template slot-scope="scope">
           　　　　<el-tag type="success" style="line-height: 25px" v-if="scope.row.status == 0">有效</el-tag>
                  <el-tag type="danger" style="line-height: 25px" v-if="scope.row.status == 1">失效</el-tag>
                   <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 2">待审核</el-tag>
           　</template>

         </el-table-column>
         <el-table-column
             prop="paramMap"
             header-align="center"
             align="center"
             label="详细参数"
             :show-overflow-tooltip='showText'>
         </el-table-column>
         <el-table-column
             prop="image"
             header-align="center"
             align="center"
             label="图片"
         >
           　<template slot-scope="scope">
           　　　　<img :src="scope.row.image" width="40" height="40" @mousemove="imgDialog(scope.row.image)" @mouseout="imgOut"/>
           　　</template>
         </el-table-column>
         <el-table-column
             fixed="right"
             header-align="center"
             align="center"
             width="250"
             label="操作">
           <template slot-scope="scope">
             <el-button size="small"  type="primary" @click="getSku(scope)">库存</el-button>
             <el-button size="small" type="success"@click="updated(scope)">修改</el-button>
             <el-button size="small" type="danger" v-if="scope.row.status == 0" @click="invalid(scope)">失效商品</el-button>
             <el-button size="small" type="warning"v-if="scope.row.status == 1" @click="reUpShop(scope)">重新上架</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
      <div class="page">
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[7,15,20,30,50,200]"
              :page-size='pageSize'
              layout="total, sizes, prev, pager, next, jumper"
              :total='total'>
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="imgflolt" v-if="this.imgDialog!=null"  width="20%" height="22%" style="border-radius: 4px;">
        <img :src='imgSrc'>
    </div>
<!--    sku数据-->
    <el-dialog title="库存数据" :visible.sync="skuVisible">
      <el-table
          :data="skuData"
          border
          style="width: 100%;">
        <el-table-column
            prop="id"
            header-align="center"
            align="center"
            label="id">
        </el-table-column>
        <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="类型">
        </el-table-column>
        <el-table-column
            prop="brand"
            header-align="center"
            align="center"
            label="品牌">
        </el-table-column>
        <el-table-column
            prop="size"
            header-align="center"
            align="center"
            label="尺寸">
        </el-table-column>
        <el-table-column
            prop="color"
            header-align="center"
            align="center"
            label="颜色">
        </el-table-column>
        <el-table-column
            prop="status"
            header-align="center"
            align="center"
            label="状态">
          　<template slot-scope="scope">
          　　　　 <el-tag type="success" style="line-height: 25px" v-if="scope.row.status == 0">有效</el-tag>
                 <el-tag type="danger" style="line-height: 25px" v-if="scope.row.status == 1">失效</el-tag>
                 <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 2">待审核</el-tag>
          　</template>
        </el-table-column>
        <el-table-column
            prop="ware"
            header-align="center"
            align="center"
            label="库存">
        </el-table-column>
      </el-table>
    </el-dialog>
<!--    新增修改-->
    <clothing-update-add
        :clothing-update-add-status="updatedAddStatus"
        @clothingUpdateAddStatusClose="updateAddStatusClose"
        :list="updateAddData"
        :do-type="doType"
        @updateStatus="updateStatus"
        @updateAdd="updateStatus"
    ></clothing-update-add>
    <loading></loading>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'


import clothingUpdateAdd from './clothing-update-add'
import loading from "@/views/common/loading";
import ElementUI from "_element-ui@2.15.6@element-ui";
export default {
//import引入的组件需要注入到对象中才能使用
components: {
  clothingUpdateAdd,
  loading,
},
props: {},
data() {
//这里存放数据
return {
  dataList:[],
  pageSize: 7,
  pageNum: 1, //默认第一页
  total: null,
  showText:true,
  skuData:[],
  imgSrc:null,
  skuVisible:false,
  searchdata:null,
  likePage: 500,
  dotitle:null,
  updatedAddStatus:false,    //新增修改的dialog
  pageType: "basePage",

  updateAddData:{
    rowId: null,
    rowTitle:null,
    rowType:null,
    rowBrand:null,
    rowWare:null,
    rowImage:null,
    rowPrice:null,
  },
  doType:null
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  page(){
    this.pageType = "basePage"
    this.$http({
      url: 'product/clothingspu/page',
      method: 'post',
      data:this.$http.adornData({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    }).then((res)=>{
      this.dataList = res.data.page.list
      this.total = res.data.page.totalCount
    })
  },
  handleSizeChange(val) {
    this.pageSize = val
  },
  handleCurrentChange(val) {
    this.pageNum = val
    if (this.pageType=="basePage"){
      this.page()
    }
    if (this.pageType=="search"){
      this.search()
    }
  },
  imgDialog(img){
    this.imgSrc = img
  },
  imgOut(){
    this.imgSrc = null
  },
  //查看sku,库存
  getSku(row){
    this.$http({
      url: 'product/clothingsku/sku',
      method: 'post',
      data: this.$http.adornData({
        spuId:row.row.id
      })
    }).then((res)=>{
      // console.log(res)
      this.skuData = res.data.data
      this.skuVisible = true
    })
  },
  //模糊查询
  search(){
    this.pageType = "searce"
    this.$http({
      url:'product/clothingspu/search',
      method: 'post',
      data:this.$http.adornData({
        like: this.searchdata,
        pageNum:this.pageNum,
        pageSize:this.pageSize
      })
    }).then((res)=>{
      this.dataList = res.data.page.list
    })
  },
  //修改
  updated(row){
    // console.log(row)
    this.updateAddData.rowId = row.row.id
    this.updateAddData.rowType = row.row.type
    this.updateAddData.rowBrand = row.row.brand
    this.updateAddData.rowImage = row.row.image
    this.updateAddData.rowWare = row.row.wareTotal
    this.updateAddData.rowTitle = row.row.title
    this.updateAddData.rowPrice = row.row.price
    this.doType = "update"
    this.updatedAddStatus = true
  },
  updateAddStatusClose(){
    this.updatedAddStatus = false

  },
  add(){
    this.doType = "add"
    this.updatedAddStatus = true
  },
  updateStatus(){
    this.updatedAddStatus = false
    this.page()
  },
  //失效商品
  invalid(row){
    this.$http({
      url: 'product/clothingspu/invalid',
      method: 'post',
      data: this.$http.adornData({
        id: row.row.id
      })
    }).then((res)=>{
      if (res.data.status==0){
        ElementUI.Message({
          message: "失效成功",
          type: 'success'
        })
      }
      this.page()
    })
  },
  reUpShop(row){
    this.$http({
      url: 'product/clothingspu/reUpShop',
      method: 'post',
      data: this.$http.adornData({
        id: row.row.id,
        // roleId:1
        roleId: sessionStorage.getItem("roleId"),
      })
    }).then((res)=>{
      if (res.data.status==0){
        ElementUI.Message({
          message: '商品恢复申请已提交，状态：待审核',
          type: 'success'
        })
      }
      this.page()
    })
  }






},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.page();
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
*{
  line-height: 0;
}
.page{
  /*background-color: red;*/
  height: 50px;
  width: 700px;
  margin: 0 auto;
}
.imgflolt{
  width: 400px;
  height: 400px;
  /*background-color: red;*/
  border: 0;
  position: absolute;
  top: 25%;
  left: 45%;
  overflow: hidden;

}

.search>span{
  float: left;
}
.searchSelect{
  height: 30px;
  /*line-height: 30px;*/
}
.hearder{
  /*background-color: red;*/
  height: 40px;
}
.hearder div{
  float: left;
}
.hearderAdd{
margin-left: 20px;
}
.hearderAdd button{
  height: 40px;
  width: 70px;
  border-radius: 3px;
  color: #ffffff;
  border: none;
  background-color: #08AEEA;
  background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
}
.hearderAdd button:hover{
  background-color: #FBAB7E;
  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

}





</style>
